<template>
	<view class="members">
		<view class="searchBox">
			<view class="search_content dFlex jBetween_aCenter">
				<u-icon name="search" color='#999999' size='20px'></u-icon>
				<input type="text" v-model="kw" placeholder="请输入关键字搜索"/>
				<view class='searchBtn' @click='search'>搜索</view>
			</view>
		</view>
		<view class="memberList">
			<view class="memberOne dFlex jStart_aCenter" v-for="(item,index) in list" :key='index'>
				<view class="memTx imgPublic">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<view class="memInfo">
					<view class="name_price dFlex jStart_aCenter">
						<text>{{item.nickname}}</text>
						<!-- <view class="priceIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/price.png" mode="widthFix"></image>
						</view>
						<view class="dr imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/dr.png" mode="widthFix"></image>
						</view> -->
					</view>
					<view class="order">
						<text>成交额：{{item.total_money}}</text>
						<text>订单数：{{item.total_num}}</text>
					</view>
					<view class="orderTime">最近下单时间：{{item.last_order_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kw:'',
				list:[],
				page:1,
				load:false,
			};
		},
		onShow(){
			this.initList();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page ++ ;
				this.initList();
			}
		},
		methods:{
			search(){
				this.page = 1;
				this.initList();
			},
			initList(){
				this.tool.getData('/api/User/getMyTeamList',{
					keyword:this.kw,
					page:this.page,
				}).then(res=>{
					console.log(res);
					this.list = this.page == 1 ? res.list : this.list.concat(res.list);
					this.load = res.list.length >= 10 ? true:false;
				}).catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.members{
		.memberOne{
			.memInfo{
				.orderTime{
					font-size: 12px;
					color: #666666;
				}
				.order{
					text{
						display: inline-block;
						margin-right: 12px;
					}
					font-size: 12px;
					color: #666666;
					margin:6px 0;
				}
				.dr{
					width:30px;
				}
				.priceIcon{
					margin:0 12px;
					width:15px;
				}
				flex:1;
			}
			.memTx{
				width:50px;
				height:50px;
				border-radius: 50%;
				margin-right: 12px;
				overflow: hidden;
				image{
					width:100%;
					height: 100%;
				}
			}
			width:100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			margin-bottom: 12px;
			border-radius: 5px;
		}
		.searchBox{
			.search_content{
				input{
					flex:1;
					margin: 0 12px;
				}
				.searchBtn{
					width: max-content;
					padding: 5px 15px;
					color:white;
					border-radius: 50px;
					background: linear-gradient( to right, #FE5300, #FC9300);
				}
				width:100%;
				border-radius: 50px;
				padding:4px 4px 4px 12px; 
				box-sizing: border-box;
				background: white;
			}
			width:100%;
			margin-bottom: 12px;
		}
		width:100%;
		padding: 12px;
		box-sizing: border-box;
	}
page{
	background:#f8f8f8;
}
</style>
